<template>
  <div :class="widthLevel > 1?'my-article':'my-article-mobile'">
    <!-- 文章内容 -->
    <div  style="margin: 0 16px; text-align: left">
      <!-- 标题 -->
      <h1 style="margin: 10px auto">{{concurrentArticle.title}}</h1>

      <!-- 基础信息 -->
      <div>
        <div class="text-left text-h6  text-md-h5 green lighten-4 white--text pl-2" style="border-left: 5px solid green !important;">1.基础信息</div>
        <div>
          <div style="margin: 5px; padding: 2px 10px; text-align: left; font-size: 16px">
            <span style="margin-right: 5px">文章作者:</span>
            <span>{{concurrentArticle.authorName}}</span>
          </div>
          <div style="margin: 5px; padding: 2px 10px; text-align: left; font-size: 16px">
            <span style="margin-right: 5px">发布时间:</span>
            <span>{{concurrentArticle.time}}</span>
          </div>
          <div style="margin: 5px; padding: 2px 10px; text-align: left; font-size: 16px">
            <span style="margin-right: 5px">文章类型:</span>
            <span>{{concurrentArticle.className}}</span>
          </div>
          <div style="margin: 5px; padding: 2px 10px; text-align: left; font-size: 16px">
            <span style="margin-right: 5px">浏览次数:</span>
            <span>{{concurrentArticle.pageView}}</span>
          </div>
          <div style="margin: 5px; padding: 2px 10px; text-align: left; font-size: 16px">
            <span style="margin-right: 5px">点赞次数:</span>
            <span>{{concurrentArticle.thumbNumber}}</span>
          </div>
          <div style="margin: 5px; padding: 2px 10px; text-align: left; font-size: 16px">
            <span style="margin-right: 5px">归属标签:</span>
            <span style="text-decoration: underline; margin-right: 5px; display: inline-block; cursor: pointer" @click="$router.push('/tag/'+tag.tagId)" :key="tag.tagId" v-for="tag in concurrentArticle.tags">{{tag.tagName}}</span>
          </div>
        </div>
      </div>

      <!-- 简介 -->
      <div>
        <div class="text-left text-h6  text-md-h5 green lighten-4 white--text pl-2" style="border-left: 5px solid green !important;">2.文章简介</div>
        <p style="text-indent: 2em; text-align: left; font-size: 16px" class="mt-2">{{concurrentArticle.description}}</p>
      </div>

      <!-- 具体内容 -->
      <div>
        <div class="text-left text-h6  text-md-h5 green lighten-4 white--text pl-2" style="border-left: 5px solid green !important;">3.具体内容</div>
        <mavon-editor :toolbarsFlag="false"  :previewBackground="'white'" :shortCut="false" :boxShadow="false" style="background-color: transparent !important; border: none !important; z-index: auto!important; font-size: 16px"  :subfield="false" defaultOpen="preview" v-model="concurrentArticle.content"></mavon-editor>
      </div>
    </div>

    <!--  点赞标签  -->
    <div style="position: fixed; right: 5%; top: 15%;">
      <v-scale-transition>
        <v-btn v-show="thumbFlag" @click="thumb" class="mx-2" fab dark large color="cyan">
          <v-icon dark>mdi-thumb-up</v-icon>
        </v-btn>
      </v-scale-transition>
    </div>
  </div>
</template>

<script>
import Http from "@/api/http";

export default {
  name: "Article",


  data: ()=>{
    return {
      concurrentArticle: {},
      thumbFlag: false
    }
  },


  methods: {
    thumb(){

      // 1. 检查是否已点过赞
      if(window.localStorage.getItem("thumb:"+this.$route.params.articleId)){
        this.thumbFlag = false;
        return ;
      }

      // 2. 远程修改
      Http.put("/article/"+this.$route.params.articleId+"/thumb").then(data=>{
        if(data.code == 1){
        }else {
          this.$emit("updateError",data.message);
        }
      }).catch(fail=>{
        this.$emit("updateError","服务端发生错误");
        console.error(fail);
      })

      // 3. 本地修改
      this.concurrentArticle.thumbNumber++;

      // 4. 在localStorage中修改
      window.localStorage.setItem("thumb:"+this.$route.params.articleId, true);

      //5. 标志修改
      this.thumbFlag = false;
    }
  },


  props: {
    widthLevel: Number
  },

  watch: {
    "$route.params.articleId"(newValue, oldValue){
      // 对参数进行判断
      if(newValue == undefined||newValue == ""){
        return ;
      }

      this.$emit("childloading", true);

      // 获取文章
      Http.get("/article/"+this.$route.params.articleId).then(data=>{
        if(data.code == 1){
          this.concurrentArticle = data.result
          this.$emit("childloading", false);
        }else {
          this.$emit("updateError",data.message);
          this.$emit("childloading", false);
        }
      }).catch(fail=>{
        this.$emit("updateError","服务端发生错误");
        console.error(fail);
        this.$emit("childloading", false);
      })

      // 判断是否需要显示点赞按钮
      if(window.localStorage.getItem("thumb:"+this.$route.params.articleId)){
        this.thumbFlag = false;
      }else {
        this.thumbFlag = true;
      }

    }
  },

  created() {
    this.$emit("childloading", true);

    // 获取文章
    Http.get("/article/"+this.$route.params.articleId).then(data=>{
      if(data.code == 1){
        this.concurrentArticle = data.result;
        this.$emit("childloading", false);
      }else {
        this.$emit("updateError",data.message);
        this.$emit("childloading", false);
      }
    }).catch(fail=>{
      this.$emit("updateError","服务端发生错误");
      console.error(fail);
      this.$emit("childloading", false);
    })

    if(window.localStorage.getItem("thumb:"+this.$route.params.articleId)){
      this.thumbFlag = false;
    }else {
      this.thumbFlag = true;
    }
  }
}
</script>

<style scoped>
  .my-article-mobile{
    margin: 0 auto 30px;
    padding: 0;
    text-align: center
  }
  .my-article{
    margin: 5px 2px 30px;
    padding: 0;
    text-align: center
  }

</style>
<style>
  .v-note-wrapper .v-note-panel .v-note-show .v-show-content {
    padding: 2px 2px 15px !important;
  }
</style>